<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" id="searchInput" />
    <script>
      // function debounce(func, wait) {
      //   let timeout;

      //   return function () {
      //     // 清除之前的定时器
      //     clearTimeout(timeout);
      //     console.log("this", this);
      //     // 设置新的定时器
      //     timeout = setTimeout(() => {
      //       func.apply(this, arguments);
      //     }, wait);
      //   };
      // }
      function debounce(func, wait) {
        let timeId; //闭包
        return function () {
          clearTimeout(timeId);
          timeId = setTimeout(() => {
            func(...arguments); //arguments是一个类数组对象,包含传入函数中的所有参数
          }, wait);
        };
      }
      // 模拟的搜索函数
      function search(query) {
        console.log("Searching for:", query);
      }

      // 创建一个防抖版本的搜索函数，延迟为1000毫秒（1秒）
      const debouncedSearch = debounce(search, 1000);

      // 假设这是你的输入框元素
      document
        .querySelector("#searchInput")
        .addEventListener("input", (event)=>{
          console.log(this);
          debouncedSearch(event.target.value);
        });
    </script>
  </body>
</html>
